<% extend('../layout/index.html') %>

<% block('body', function () { %>
<el-card class="box-card">
  <div slot="header" class="flex">
    <div class="box-1">{{title}}-<% if (id) { %>修改<% } else { %>添加<% } %></div>
    <el-link @click="save" type="primary">保存</el-link>
  </div>
  <el-row>
    <el-col :span="14" :offset="5">
      <el-form label-width="80px" :model="form">
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <!-- <el-form-item label="副标题">
          <el-input v-model="form.subtitle"></el-input>
        </el-form-item> -->
        <el-form-item label="状态">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item label="详情">
          <div style="position: relative;">
            <div ref="editor" id="editor"></div>
          </div>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</el-card>  

<% }) %>
<% block('script', function () { %>
<script>
;(function () {
  new Vue({
    el: '#app',
    created () {
      if (this.id) {
        this.getDetail(this.id)
      } 
    },
    data () {
      return {
        form: {
          title: '',
          // subtitle: '',
          detail: '',
          status: 1
        },
        id: '<%- id %>',
        editor: null
      }
    },
    methods: {
      createEditor (dom) {
        const E = window.wangEditor
        this.editor = new E(dom)
        this.editor.config.uploadImgServer = '/api/upload'
        this.editor.create()
        this.initEditorConfig()
      },
      async getDetail (id) {
        const { data } = await axios.get(`/api/{{name}}/${id}`)
        this.form = data
        this.editor.txt.html(this.form.detail)
      },
      initEditorConfig () {
        this.editor.config.onchange = newval => {
          this.form.detail = newval
        }
        this.editor.config.customUploadImg = async function (resultFiles, insertImgFn) {
          console.log(resultFiles[0])
          const formData = new FormData()
          formData.append('file', resultFiles[0])
          // if (!file) return 
          const { data } = await axios.post('/api/upload', formData)
          insertImgFn(data.path)
        }
      },
      save () {
        const fn = this.id ? this.update : this.add
        fn()
      },
      async update () {
        try {
          const data = await axios.put('/api/{{name}}', this.form)
          location.href = '/{{name}}'
          this.$message.success(MESSAGE.SCUCCESS)
        } catch (error) {
          this.$message.error(MESSAGE.ERROR)
        }
      },
      async add () {
        try {
          const data = await axios.post('/api/{{name}}', this.form)
          location.href = '/{{name}}'
          this.$message.success(MESSAGE.SCUCCESS)
        } catch (error) {
          this.$message.error(MESSAGE.ERROR)
        }
      }
    },
    mounted() {
      this.createEditor(this.$refs.editor)
    },
  })
})()
</script>
<% }) %>